import React from "react";
import "../css/TodoBoard.css";
import { TODOKEY, FINISHED, PENDDING, DELETED } from "./config";

class TodoBoard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            todos: JSON.parse(localStorage.getItem(TODOKEY)) || [],//保存源数据
            filterTodos: [],//保存筛选出来的数据
            number: 1
        }
    }

    //创建阶段
    //组件将要挂载
    componentWillMount() {
        //更新组件本身的初始化状态
        // 组件挂载前，筛选数据
        var tempArray = [];
        this.state.todos.forEach(element => {
            if (element.status !== DELETED) {
                tempArray.push(element);
            }
        });
        this.setState({
            filterTodos: tempArray
        })
    }

    render() {
        return (
            <div className="content-container">
                <div className="content-wrapper">
                    {
                        this.state.filterTodos.map((element, index) => {
                            return <div key={index}
                                className="todo_item_container">
                                <div className="todo_item_checkbox">
                                    <input checked={element.status === FINISHED}
                                        type="checkbox" onChange={(event) => {
                                            console.log(event.target.checked);
                                            var checked = event.target.checked;
                                            if (checked) {
                                                element.status = FINISHED;
                                            } else {
                                                element.status = PENDDING;
                                            }

                                            //更新组件的状态
                                            this.setState({
                                                todos: this.state.todos
                                            })
                                            //保存
                                            localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                        }} />
                                </div>
                                <div className="todo_item_content">{element.content}</div>
                                <div className="todo_item_button">
                                    <button onClick={() => {
                                        element.status = DELETED;
                                        var index = this.state.filterTodos.findIndex((subElement) => {
                                            return subElement.content === element.content;
                                        })

                                        if (index !== -1) {
                                            this.state.filterTodos.splice(index, 1);
                                        }
                                        this.setState({
                                            filterTodos: this.state.filterTodos
                                        })

                                        //保存
                                        localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                    }}>删除</button>
                                </div>
                            </div>
                        })
                    }
                </div>
                <div className="todo_tool_bar">
                    <div>
                        <button onClick={() => {
                            var tempArray = [];
                            this.state.todos.forEach(element => {
                                if (element.status !== DELETED) {
                                    tempArray.push(element);
                                }
                            });
                            this.setState({
                                filterTodos: tempArray
                            })
                        }}>全部</button>
                    </div>
                    <div>
                        <button onClick={() => {
                            this.state.filterTodos = [];
                            this.state.todos.forEach(element => {
                                if (element.status === FINISHED) {
                                    this.state.filterTodos.push(element)
                                }
                            });
                            this.setState({
                                filterTodos: this.state.filterTodos
                            })
                        }}>已完成</button>
                    </div>
                    <div>
                        <button onClick={() => {
                            this.state.filterTodos = [];
                            this.state.todos.forEach(element => {
                                if (element.status === PENDDING) {
                                    this.state.filterTodos.push(element);
                                }
                            })
                            this.setState({
                                filterTodos: this.state.filterTodos
                            })
                        }}>正在进行</button>
                    </div>
                    <div>
                        <button onClick={() => {
                            this.state.filterTodos = [];
                            this.state.todos.forEach(element => {
                                if (element.status ===DELETED) {
                                    this.state.filterTodos.push(element);
                                }
                            })
                            this.setState({
                                filterTodos: this.state.filterTodos
                            })
                        }}>已删除</button>
                    </div>
                </div>
            </div>
        );
    }
    //组件完成挂载:vue mounted
    componentDidMount() {
        //执行异步请求或者耗时操作
    }

    //更新阶段
    componentWillReceiveProps(props) {
        console.log(props);
        //接受新的props，更新组件的状态
        this.props = props;

        //去重 
        var index = this.state.todos.findIndex((element) => {
            return element.content === this.props.todo.content;
        })

        if (index !== -1) {
            alert('不能添加重复的todo');
            return;
        }

        this.state.todos.push(this.props.todo);
        //保存
        localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
        this.setState({
            todos: this.state.todos
        });

    }
    //是否允许组件更新
    shouldComponentUpdate() {
        return true;
    }

    componentWillUpdate() {

    }

    componentDidUpdate() {

    }
}

export default TodoBoard;